<!DOCTYPE html>
<html lang="en">
<!-- 新东西 line-height 设置內右边距 将文字向内移动 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东的左侧导航</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            background-color: #bfa;
            /* 设置整个网页的背景方便查看 */
        }

        .left-nav {
            width: 190px;
            height: 450px;
            padding: 10px 0px;
            background-color: #fff;
            /* 每一行选中还有背景 显示多款 多高 */
            /* 设置菜单内部的item */
            margin: 50px;
        }

        .left-nav .item {
            height: 25px;
            line-height: 25px;
            /* 设置文字的右外边距 将文字想內移动 */
            padding-left: 18px;
            /* 宽度有没有指定 如果没指定 往里面挤 指定了 会溢出 */
            font-size: 12px;
        }

        .item:hover {
            background-color: #d9d9d9;
        }

        .item a {
            color: #333;
            /* 设置字体的颜色  */
            text-decoration: none;
            /* 去除下划线 */
            font-size: 14px;
            /*对a单独设置样式*/
            /* 把原来继承的样式覆盖 */

            /* 设置字体大小 */


        }

        .item a:hover {
            color: #c81623
        }

        /* 设置超链接hover的样式 */

        /* 如果设置一个外边距 左面就不属于div了 */
        /* 鼠标处于那个部分  并不会有灰色 */
        /* 要设置一个距离 但那个距离还是属于div的 */


        /* 让文字在父元素中垂直居中 只需将父元素的line-height设置为一个和父元素height一样的值即可*/
        /* hover应该是item上面 */
    </style>
    <!-- 结构很简单 一个框就是一个块 -->
    <!-- nav div ul  -->

</head>

<body>
    <!-- <div class="class"></div> -->
    <nav class="left-nav">
        <!-- 每个东西都独占一行 用div  -->
        <!-- div里面还要放超链接 -->
        <div class="item">
            <a href="#">家用电器</a>
        </div>

        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>


        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>

        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>

        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>
        <div class="item">
            <a href="#">手机</a>/
            <a href="#">运营商</a>/
            <a href="#">数码</a>

        </div>


    </nav>
</body>

</html>